<!--
 * @Author: wuchao66_Git 2803670835@qq.com
 * @Date: 2023-11-08 15:26:24
 * @LastEditors: wuchao66_Git 2803670835@qq.com
 * @LastEditTime: 2023-11-14 12:37:38
 * @FilePath: \t161xgvue\src\views\user\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <el-breadcrumb separator="/">
  <el-breadcrumb-item :to="{ path: '/' }">去登录</el-breadcrumb-item>
  <el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item>
  <el-breadcrumb-item>活动列表</el-breadcrumb-item>
  <el-breadcrumb-item>活动详情</el-breadcrumb-item>
</el-breadcrumb>
<el-card class="box-card">
    
  <el-form ref="form" :model="userVO" label-width="80px">
            <el-row>
              <el-col :span="6">
                <el-form-item label="部门">
                  <el-select
                    v-model="userVO.departmentId"
                    placeholder="请选择"
                    clearable
                  >
                    <el-option
                      v-for="item in departmentList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                      clearable
                    >
                      <span style="float: left">{{ item.name }}</span>
                      <span style="float: right; color: #8492a6; font-size: 13px"
                        ><el-tag type="danger" size="mini">{{
                          item.departcount
                        }}</el-tag></span>
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="用户名">
                  <el-input v-model="userVO.username" clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="邮箱">
                  <el-input v-model="userVO.email" clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="性别">
                  <el-radio-group v-model="userVO.sex">
                    <el-radio :label="0">男</el-radio>
                    <el-radio :label="1">女</el-radio>
                    <el-radio :label="''">全部</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="6">
                <el-form-item label="昵称">
                  <el-input v-model="userVO.nickname" clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="18">
                <el-button type="primary" icon="el-icon-refresh" @click="reset"
                  >重置</el-button
                >
                <el-button type="success" icon="el-icon-search" @click="search"
                  >查询</el-button
                >
                <el-button type="info" icon="el-icon-plus" @click="addUser"
                  >添加</el-button
                >
                <el-button
                  type="warning"
                  icon="el-icon-download"
                  @click="exportExcel"
                  >导出</el-button
                >
              </el-col>
            </el-row>
          </el-form>
       <!-- 表格 -->
        <!--表格内容显示区域-->
        <el-table :data="userList" border max-height="400" style="width: 100%">
          <el-table-column prop="id" label="#" width="50"> </el-table-column>
          <el-table-column prop="username" label="用户名" width="110">
          </el-table-column>
          <el-table-column prop="sex" label="性别" width="60">
            <!-- 如何获取循环的对象 useList  双重三元表达式 -->
            <template slot-scope="scope">
              {{ scope.row.sex == 0 ? "男" : scope.row.sex == 1 ? "女" : "保密" }}
            </template>
          </el-table-column>
          <el-table-column
            prop="departName"
            sortable
            label="所属部门"
            width="180"
          >
          </el-table-column>
          <el-table-column sortable prop="birth" label="生日" width="180">
          </el-table-column>
          <el-table-column sortable prop="email" label="邮箱" width="180">
          </el-table-column>
          <el-table-column prop="phoneNumber" label="电话" width="150">
          </el-table-column>
          <el-table-column prop="status" label="是否禁用" width="100">
            <!-- scope表示当前表中的一行数据 -->
            <template slot-scope="scope">
              <!-- scope.row表示这一行的对象 -->
              <el-switch
                v-model="scope.row.status"
                active-color="#ff4949"
                inactive-color="#cccccc"
              >
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <el-button type="primary" size="mini" icon="el-icon-edit"></el-button>
            <el-button
              type="danger"
              size="mini"
              icon="el-icon-delete"
            ></el-button>
            <el-button
              type="warning"
              size="mini"
              icon="el-icon-s-tools"
            ></el-button>
          </el-table-column>
        </el-table>
           <!-- 分页 -->
           <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[1,5, 10, 15, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
          <!-- 父传子 -->
          <UserAdd :addOrUpdateVisible="addOrUpdateVisible"
          :departmentList="departmentList"
          @changeShow="showAddOrUpdate"></UserAdd>
  </el-card>
    </div>
  </template>

<script>
  import {findDepartMent} from '../../api/department'
  import {findUserList,exportUserExcel} from '../../api/user'
  import UserAdd from '../../views/user/UserAdd.vue'
  export default {
    components:{
      UserAdd
    },
  methods: {
    showAddOrUpdate(data){//子传父，回来的值进行关闭
          if(data==="false"){//父传子
              this.addOrUpdateVisible=false;
          }else{
            this.addOrUpdateVisible=true;
          }
      },
  async  exportExcel(){
    exportUserExcel(this.userVO).then(res => {
        //这里没有返回数据,但是要在响应头中进行下载操作
        // 将二进制文件转化为可访问的url，相当于访问url进行下载
        let url = window.URL.createObjectURL(new Blob([res]));
        //创建了一个a标签的超链接
        var a = document.createElement("a");
        //将a标签添加到body内容中
        document.body.appendChild(a);
        a.href = url;
        a.download = "用户列表.xls";
        a.click();//@click=download()<a @click=down href="url"></a>
        window.URL.revokeObjectURL(url);//关闭文件流
    }).catch(err => {
      console.log(err);
    })
    },
    async getUserList() {
    let res=  await findUserList(this.currentPage, this.pageSize,this.userVO);
    this.userList=res.data.userList.records;
        this.total=res.data.userList.total;
  },
  async getDepartmentList() {
    let res=  await findDepartMent();
    this.departmentList=res.data.deptList;
  }
  ,
    handleSizeChange(val) {
          this.pageSize = val;
          this.getUserList();
          console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
          this.currentPage = val;
          this.getUserList();
          console.log(`当前页: ${val}`);
        },
        addUser(){
      this.addOrUpdateVisible=true;
    },
    reset(){
        this.userVO={};
    },
    search(){
      this.getUserList();
    }
  },created(){
    this.getDepartmentList();
    this.getUserList();
  }
  ,data(){
      return {
         userVO:{
            departmentId: "",
          username: "",
          email: "",
          sex: "",
          nickname: "",
          },
          currentPage:1,
          pageSize:5,
          userList:[],
          total:82,
          departmentList: [],
            // 控制新增编辑弹窗的显示与隐藏
    addOrUpdateVisible: false,
      }
  }

}
</script>

<style>
  .el-breadcrumb {
      margin-bottom: 10px;
    }
    .el-input,
    .el-select {
      width: 210px;
    }
    
    .el-pagination {
      margin-top: 10px;
    }
    .el-table-column{
      height: 20px;
    }
</style>